<%--门店系统第二个页面 和 第一个的页面一模一样哦--%>
<%--页面介绍：单店对比--%>
<%--时间：2018-5-11--%>
<%--创建人：Lt--%>

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>加盟店 -- 单店对比</title>
    <link rel="stylesheet" href="${contextPath}/static/statistics/css/bootstrap.css">
    <link rel="stylesheet" href="${contextPath}/static/statistics/css/bootstrap.min.css">
    <link rel="stylesheet" href="${contextPath}/static/statistics/css/bootstrap-datetimepicker.min.css">
    <script src="${contextPath}/static/statistics/js/jquery.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap.min.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.min.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.fr.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="${contextPath}/static/statistics/js/vue.js"></script>
    <script src="${contextPath}/static/util/my-autocomplete.js"></script>
    <script src="${contextPath}/static/statistics/js/echarts.min.js"></script>
    <script type="text/javascript" src="${contextPath}/static/statistics/js/jquery.mockjax.js"></script>
    <script type="text/javascript" src="${contextPath}/static/statistics/js/jquery.autocomplete.js"></script>
    <link rel="stylesheet" href="${contextPath}/static/layer/css/layui.css" media="all">

    <style>
        .autocomplete-suggestions {
            border: 1px solid #999;
            background: #FFF;
            overflow: auto;
        }

        .autocomplete-suggestion {
            padding: 2px 5px;
            white-space: nowrap;
            overflow: hidden;
        }

        .autocomplete-selected {
            background: #F0F0F0;
        }

        .autocomplete-suggestions strong {
            font-weight: normal;
            color: #3399FF;
        }
    </style>
</head>
<body style="background: rgba(119, 118, 118, 0.15);">
<div class="container-fluid" id="app">
    <form class="form-inline" name="myForm" style="margin-bottom:20px;margin-top: 16px;">
        <shiro:hasPermission name="CLOUDERPORDERSPLADMINORDER:STATISTICS">
            <div class="form-group">
                <input id="cityNameInput" onfocus="this.value=''" class="form-control input-sm" type="text"
                       placeholder="区域名称">
            </div>
            <div class="form-group">
                <input id="quXianNameInput" onfocus="this.value=''" class="form-control input-sm" type="text"
                       placeholder="门店名称">
            </div>
        </shiro:hasPermission>
        <shiro:lacksPermission name="CLOUDERPORDERSPLEMPORDER:STATISTICS">
            <shiro:lacksPermission name="CLOUDERPORDERSPLCHANNELORDER:STATISTICS">
                <div class="form-group">
                    <input id="channelNameInput" onfocus="this.value=''" class="form-control input-sm" type="text"
                           placeholder="渠道名称">
                </div>
            </shiro:lacksPermission>
            <div class="form-group">
                <input id="empNameInput" onfocus="this.value=''" class="form-control input-sm" type="text"
                       placeholder="客户经理名称">
            </div>
        </shiro:lacksPermission>

        <div class="form-group hide">
            <input id="beginTimeInput" class="form-control input-sm" type="text"
                   placeholder="开始时间">
        </div>
        <div class="form-group">
            <input id="endTimeInput" class="form-control input-sm" type="text"
                   placeholder="截止时间">
        </div>
        <button type="button" class="btn btn-success btn-sm" @click="selectData(1)"
                title="">查询
        </button>
    </form>

    <form class="form-inline" style="margin-top: 50px; margin-bottom: 5px;">
        <div class="form-group" style="width: 100%; margin-bottom: 5px;">
            <label for="cityNameInput">区域：</label>
            <select class="form-control" id="cityNameInput1" style="width: 120px; margin-left: 32px;">
                <option selected>请选择</option>
                <option v-for="(obj, index) in areaObjects">{{ obj.areaName }}</option>
            </select>

            <label for="exampleInputName2" style="margin-left: 33px;">门店：</label>
            <select class="form-control" style="width: 120px;">
                <option selected>请选择</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>

            <label for="exampleInputName2" style="margin-left: 25px">查询条件：</label>
            <div class="radio" style="border: solid #34ce57 .7px; width: 100px;">
                <label>
                    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" > 销售量
                </label>
                <label>
                    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" > 销售额
                </label>
            </div>

            <label for="exampleInputName2" style="margin-left: 25px">排序：</label>
            <div class="radio" style="border: solid #34ce57 .7px; width: 100px;">
                <label>
                    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option1" > 门店
                </label>
                <label>
                    <input type="radio" name="optionsRadios" id="optionsRadios4" value="option2" > 区域
                </label>
            </div>

            <button type="button" class="btn btn-success" v-on:click="queryUserInfo" style="margin-left: 10px;">查询</button>
        </div>


    </form>
    <div class="row" style="background-color: rgb(53, 147, 202); margin-right: 0px; margin-left: 0px; height: 37px;">
        <div class="col-sm-10" style="margin-top: 6px;">
            <strong style="font-size: 18px; color: #f9f9f9;">门店对比</strong>
        </div>
        <div class="col-sm-2" style="text-align: right;"></div>
    </div>
    <div class="table-responsive" id="tableContainer" style="height: 410px; font-size: 15px;">
        <table class="table table-striped table-condensed table-bordered">
            <thead style="background-color: #eee;">
            <tr>
                <th rowspan="2">门店</th>
                <td colspan="3">一月</td>
                <td colspan="3">二月</td>
                <td colspan="3">三月</td>
                <td colspan="3">四月</td>
                <td colspan="3">五月</td>
                <td colspan="3">六月</td>
                <td colspan="3">七月</td>
                <td colspan="3">八月</td>
                <td colspan="3">九月</td>
                <td colspan="3">十月</td>
                <td colspan="3">十一月</td>
                <td colspan="3">十二月</td>
            </tr>
            <tr>
                <th>2016年</th>
                <td>2017年</td>
                <td>2018年</td>
                <th>2016年</th>
                <td>2017年</td>
                <td>2018年</td>
                <th>2016年</th>
                <td>2017年</td>
                <td>2018年</td>
                <th>2016年</th>
                <td>2017年</td>
                <td>2018年</td>
                <th>2016年</th>
                <td>2017年</td>
                <td>2018年</td>
                <th>2016年</th>
                <td>2017年</td>
                <td>2018年</td>
                <th>2016年</th>
                <td>2017年</td>
                <td>2018年</td>
                <th>2016年</th>
                <td>2017年</td>
                <td>2018年</td>
                <th>2016年</th>
                <td>2017年</td>
                <td>2018年</td>
                <th>2016年</th>
                <td>2017年</td>
                <td>2018年</td>
                <th>2016年</th>
                <td>2017年</td>
                <td>2018年</td>
                <th>2016年</th>
                <td>2017年</td>
                <td>2018年</td>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(obj, index) in objects">
                <th>{{ index + 1 }}</th>
                <td>{{ obj.userName }}</td>
                <th>{{ index + 1 }}</th>
                <th>{{ index + 1 }}</th>
                <th>{{ index + 1 }}</th>
                <th>{{ index + 1 }}</th>
                <th>{{ index + 1 }}</th>
                <th>{{ index + 1 }}</th>
                <th>{{ index + 1 }}</th>
                <th>{{ index + 1 }}</th>
                <th>{{ index + 1 }}</th>
                <th>{{ index + 1 }}</th>
                <th>{{ index + 1 }}</th>
                <th>{{ index + 1 }}</th>
                <th>{{ index + 1 }}</th>
                <th>{{ index + 1 }}</th>
                <th>{{ index + 1 }}</th>
                <th>{{ index + 1 }}</th>
                <th>{{ index + 1 }}</th>
                <th>{{ index + 1 }}</th>
                <th>{{ index + 1 }}</th>
                <th>{{ index + 1 }}</th>
                <th>{{ index + 1 }}</th>
                <th>{{ index + 1 }}</th>
                <th>{{ index + 1 }}</th>
                <th>{{ index + 1 }}</th>
                <th>{{ index + 1 }}</th>
                <th>{{ index + 1 }}</th>
                <th>{{ index + 1 }}</th>
                <th>{{ index + 1 }}</th>
                <th>{{ index + 1 }}</th>
                <th>{{ index + 1 }}</th>
                <th>{{ index + 1 }}</th>
                <th>{{ index + 1 }}</th>
                <th>{{ index + 1 }}</th>
                <th>{{ index + 1 }}</th>
                <th>{{ index + 1 }}</th>
            </tr>
            </tbody>
        </table>
    </div>
    <div style="text-align: right; margin-top: 10px;" id="pageDiv"></div>
</div>
<script src=${contextPath}/static/layer/layui.all.js></script>

<script type="text/javascript">
    var laypage = layui.laypage,
            layer = layui.layer
            laydate = layui.laydate;

    var queryModel = {
        userId: '879'
    }

    var app = new Vue({
        el: '#app',
        data: {
            objects: [],
            areaObjects: []
        },
        methods: {
            queryUserInfo: function () {
                queryObjects()
            }
        }
    })

    var getObjects = function (queryModel) {
        // console.log(queryModel)
        layer.load(1)
        $.ajax({
            url: '${ctxPath}/user/getUserInfo',
            type: 'post',
            data: queryModel,
            success: function (data) {
                layer.closeAll('loading');
                if (data.success == false){
                    layer.msg("获取出错："+data.message)
                    return
                }
                var dataArray = data.data;
                if (dataArray.length == 0){
                    layer.msg("查询没有数据")
                    return
                }
                // console.log(dataArray)
                app.objects = dataArray;

            },
            error: function (error) {
                layer.closeAll('loading')
            }
        })
    }

    getObjects(queryModel);

    var queryObjects = function () {
        queryModel.userId = $("#userId").val()
        getObjects(queryModel)
    }



    //执行一个laydate实例
//    laydate.render({
//        elem: '#beginTime' //指定元素
//        ,format: 'yyyy-MM-dd' //可任意组合
//    });

    //执行一个laydate实例
//    laydate.render({
//        elem: '#endTime' //指定元素
//        ,format: 'yyyy-MM-dd' //可任意组合
//    });

    var cityNode, quXianNode, channelNode, empNode, custNode, shopNode = null;

    <shiro:lacksPermission name="CLOUDERPORDERSPLEMPORDER:STATISTICS">
    empNode = '#empNameInput';
    channelNode = '#channelNameInput';
    <shiro:hasPermission name="CLOUDERPORDERSPLADMINORDER:STATISTICS">
    cityNode = '#cityNameInput';
    quXianNode = '#quXianNameInput';
    </shiro:hasPermission>
    </shiro:lacksPermission>

    organization_tree('${contextPath}', cityNode, quXianNode, channelNode, empNode, custNode, shopNode);


    $(function () {
        $('[data-toggle="tooltip"]').tooltip()
    });

</script>
</body>
</html>